import * as THREE from "three";
import {TextGeometry} from "three/examples/jsm/geometries/TextGeometry.js"
import LightWall from "../class/LightWall";
import axios from "axios";

export const TwoExp = {
    data() {
        return {}
    },
    methods: {
        async twoExp() {
            this.loading = true;
            this.$parent.btnIsDis = true;

            this.getMapData("coldWarMap");
            await this.loadCountryNumber(2);
            var fontAnimation, flagAnimation, logoAnimation, arrowAnimation, natLogoAnimation ,rejectAnimation,dateAnimation,firstDateAnimation;
            var euFontAnimation, eastEuAnimation;
            var newCameraPos, newTargetPos;
            var resource = new THREE.Object3D();
            var Group = new THREE.Group();

            // 更换画框贴图
            var picArr = [
                {imgUrl:"img/relatedPhoto/two/WestGermany 4.jpg",imgDesc:"作为北约Autumn Forge 80演习系列的一部分，英国的Spearpoint 80演习与Reforger 80一起举行。"},
                {imgUrl:"img/relatedPhoto/two/WestGermany 5.jpg",imgDesc:"Spearpoint/Lionheart 84演习是整个冷战期间英国莱茵军团(BAOR)的最大增援部队。"},
                {imgUrl:"img/relatedPhoto/two/WestGermany 6.jpg",imgDesc:"它涉及将57000名士兵从英国穿过北海和比利时前往西德——实际上是为了使BAOR在和平时期的兵力翻倍——然后返回英国。"}
            ]
            this.changePicTexture(picArr);

            Group.name = "Jb";

            // 加载国旗模型
            let westLabel = this.get3dLabel("联邦德国", false,"20px")
            // 加载Flag模型
            let flag = this.gltfLoadModel("model/public/flaggltf/scene.gltf");
            // 更改Flag国旗
            var flagWestGermany = this.changeTexture("img/flag/WestGermany.png")
            await flag.then((res) => {
                res.scene.scale.set(4, 4, 4)
                var flagWest = res.scene.clone();
                console.log(res)
                flagAnimation = res.animations[0];
                flagWest.children[0].children[1].material.map = flagWestGermany;
                flagWest.children[0].children[1].material.map.needsUpdate = true;
                flagWest.position.set(12.904894069114874, 9, -27.610714700574093);
                flagWest.name = "flagWest"
                flagWest.add(westLabel)
                resource.add(flagWest)
            })

            // 加载字体模型
            var firstDateModel = this.gltfLoadModel('model/date/19590509/scene.gltf');
            await firstDateModel.then((res) => {
                var font = res.scene ;
                firstDateAnimation = res.animations[0] ;
                font.scale.set(10,10,10)
                font.position.set(14.593373358954608, 20, -30.941698393460456)
                font.name = "2-1"
                resource.add(font)
            })

            var wtoCreateDate = this.gltfLoadModel("model/date/19550514/scene.gltf")
            await wtoCreateDate.then((res) => {
                fontAnimation = res.animations[0];
                res.scene.position.set(40, 40, -40);
                res.scene.scale.set(10, 10, 10);
                res.scene.name = "fontModel"
                resource.add(res.scene)
            })
            // 西欧模型
            var wEuFont = this.gltfLoadModel("model/public/font/West Eu/scene.gltf")
            await wEuFont.then((res) => {
                euFontAnimation = res.animations[0];
                res.scene.scale.set(10, 10, 10);
                res.scene.name = "WestEu"
                resource.add(res.scene)
            })

            // 东欧模型
            var eWuFont = this.gltfLoadModel("model/public/font/East Eu/scene.gltf")
            await eWuFont.then((res) => {
                eastEuAnimation = res.animations[0];
                res.scene.scale.set(10, 10, 10);
                res.scene.name = "EastEu"
                resource.add(res.scene)
            })

            // 加载Wto Logo模型
            var wtoLabel = this.get3dLabel("华沙条约组织", false, "50px");
            var wtoLogoModel = this.gltfLoadModel("model/wto/wtoLogoGltf/scene.gltf");
            await wtoLogoModel.then((res) => {
                logoAnimation = res.animations[0];
                res.scene.position.set(100, 40, -40)
                res.scene.scale.set(2, 2, 2)
                wtoLabel.position.set(0, 8, 0)
                res.scene.add(wtoLabel);
                res.scene.name = "wtoLogoModel"
                resource.add(res.scene)
            })

            // 加载北大西洋公约组织Logo
            var natoLabel = this.get3dLabel("北大西洋公约组织", false, "50px");
            var natoLogoModel = this.gltfLoadModel("model/nato/natoLogoGltf/scene.gltf");
            await natoLogoModel.then((res) => {
                natLogoAnimation = res.animations[0];
                res.scene.position.set(-130, 40, -40)
                res.scene.scale.set(2, 2, 2)
                natoLabel.position.set(0, 8, 0)
                res.scene.add(natoLabel);
                res.scene.name = "natoLogoModel"
                resource.add(res.scene)
            })

            // 苏联加载模型
            let sovietUnionLabel = this.get3dLabel("苏维埃社会主义共和国", true,"20px")
            let flagSovietUnionModel = this.gltfLoadModel("model/public/flaggltf/scene.gltf");
            var SovietUnionTexture = this.changeTexture("img/flag/Soviet Union.png")

            await flagSovietUnionModel.then((res) => {
                flagAnimation = res.animations[0];
                res.scene.scale.set(4, 4, 4);
                var flag = res.scene.clone();
                // 更改国旗
                flag.children[0].children[1].material.map = SovietUnionTexture;
                flag.children[0].children[1].material.map.needsUpdate = true;
                flag.rotateY(Math.PI)
                flag.position.set(134.47762643434294, 9, -35.270475436482855);
                flag.name = "SovietUnion"
                flag.add(sovietUnionLabel)
                resource.add(flag)
            })
            // 东德加载模型
            let eastLabel = this.get3dLabel("民主德国", true,"20px")
            let flagEast = this.gltfLoadModel("model/public/flaggltf/scene.gltf");
            var flagEastGermany = this.changeTexture("img/flag/EastGermany.png")

            await flagEast.then((res) => {
                res.scene.scale.set(4, 4, 4);
                var flagEastModel = res.scene.clone();
                // 更改国旗
                flagEastModel.children[0].children[1].material.map = flagEastGermany;
                flagEastModel.children[0].children[1].material.map.needsUpdate = true;
                flagEastModel.rotateY(Math.PI)
                flagEastModel.position.set(25.904894069114874, 9, -27.610714700574093);
                flagEastModel.add(eastLabel)
                flagEastModel.name = "flagEast"
                resource.add(flagEastModel)
            })


            var rightArrow = this.gltfLoadModel("model/public/rightarrow/scene.gltf");
            await rightArrow.then((res) => {
                arrowAnimation = res.animations[0];
                res.scene.scale.set(10, 10, 10);
                let rightTop = res.scene.clone();
                rightTop.name = "rightTop"
                let rightBottom = res.scene.clone();
                rightBottom.name = "rightBottom"
                let leftTop = res.scene.clone();
                leftTop.name = "leftTop"
                let leftBottom = res.scene.clone();
                leftBottom.name = "leftBottom"


                rightTop.position.set(-30, 5, -50);
                rightTop.rotateY(Math.PI / 2.25)
                resource.add(rightTop);

                rightBottom.position.set(-30, 5, 10);
                rightBottom.rotateY(Math.PI / 1.8)
                resource.add(rightBottom);

                leftTop.position.set(60, 5, 10);
                leftTop.rotateY(-(Math.PI / 1.8))
                resource.add(leftTop);

                leftBottom.position.set(60, 5, -50);
                leftBottom.rotateY(-(Math.PI / 2.25))
                resource.add(leftBottom);
            })

            // 总部迁移
            var dateModel = this.gltfLoadModel("model/date/2-19550514/event-2/scene.gltf");
            await dateModel.then((res) => {
                res.scene.scale.set(10, 10, 10);
                let obj = res.scene;
                obj.name = "event-2";
                dateAnimation = res.animations[0];
                resource.add(obj);
            })

            // 加载国旗模型
            var usLabel = this.get3dLabel("美国", true,"20px");
            var usTexture = this.changeTexture("img/flag/United States.png")
            var usFlagModel = this.gltfLoadModel("model/public/flaggltf/scene.gltf");
            await usFlagModel.then((res) => {
                let obj = res.scene;
                obj.name = "UsFlag";
                obj.add(usLabel);
                flagAnimation = res.animations[0];
                obj.children[0].children[1].material.map = usTexture;
                obj.children[0].children[1].material.map.needsUpdate = true;
                resource.add(obj);
            })


            var franchLabel = this.get3dLabel("法国", false,"20px");
            var franchTexture = this.changeTexture("img/flag/France.png")
            var franceFlagModel = this.gltfLoadModel("model/public/flaggltf/scene.gltf");
            await franceFlagModel.then((res) => {
                let obj = res.scene;
                obj.name = "FranchFlag";
                obj.add(franchLabel);
                obj.children[0].children[1].material.map = franchTexture;
                obj.children[0].children[1].material.map.needsUpdate = true;
                resource.add(obj);
            })

            var rejectModel = this.gltfLoadModel("model/public/reject/scene.gltf")
            await rejectModel.then((res) => {
                let obj = res.scene;
                rejectAnimation = res.animations[0];
                obj.name = "reject";
                resource.add(obj);
            })

            ///////////////////////脚本/////////////////////////////////////////////////////////////////////////////////
            this.secoundPromptText();
            this.loading = false;

            this.$refs.Lines.src = "music/lines/twoexp/2-4.mp3";
            this.$refs.Lines.play();

            var date = resource.getObjectByName("2-1");
            Group.add(date)
            this.onceActionPlay(firstDateAnimation,date)

            setTimeout(() => {
                let flagWest = resource.getObjectByName("flagWest");
                Group.add(flagWest)
                this.onceActionPlay(flagAnimation, flagWest)
            }, 500)


            newCameraPos = {
                x: 38.125636168732456,
                y: 51.18996899927956,
                z: 45.01254194302945
            }
            newTargetPos = {
                x: 19.593373358954608,
                y: 4.0000000000000355,
                z: -30.941698393460456
            }

            this.animateCamera(this.camera.position, this.controls.target, newCameraPos, newTargetPos, 3000)
            this.scene.add(Group)


            // +6s
            setTimeout(() => {
                var oldFont = this.scene.getObjectByName("2-1");
                Group.remove(oldFont)
                // 移动的相机视角
                let newCameraPos = {
                    x: 83.48712193994265,
                    y: 119.46786350553823,
                    z: 136.56270835270817
                }

                // 相机聚焦视角
                let newTargetPos = {
                    x: 85,
                    y: 4.000000000000063,
                    z: -28.92556378163644
                }

                this.animateCamera(this.camera.position, this.controls.target, newCameraPos, newTargetPos, 3000)
            }, 8000)


            let natoLogo = resource.getObjectByName("natoLogoModel");
            Group.add(natoLogo)
            this.onceActionPlay(natLogoAnimation, natoLogo);


            setTimeout(() => {
                let font = resource.getObjectByName("fontModel");
                Group.add(font)
                this.onceActionPlay(fontAnimation, font);
            }, 9000)

            // 4s后 苏联国旗出现
            setTimeout(() => {
                let SovietUnion = resource.getObjectByName("SovietUnion");
                console.log(SovietUnion)
                Group.add(SovietUnion)
                this.onceActionPlay(flagAnimation, SovietUnion);
            }, 10000)


            setTimeout(() => {
                let wtoLogo = resource.getObjectByName("wtoLogoModel");
                Group.add(wtoLogo)
                this.onceActionPlay(logoAnimation, wtoLogo);
            }, 12000)

            // 9-3 = 6s 间隔
            this.initWtoColor();

            // 9s后 东德出现
            setTimeout(() => {
                // 东德,加载资源
                let flagEast = resource.getObjectByName("flagEast");
                Group.add(flagEast)
                this.onceActionPlay(flagAnimation, flagEast);
            }, 15000)

			setTimeout(() => {
				let EastEu = resource.getObjectByName("EastEu");
				EastEu.position.set(50, 20, -20)
				Group.add(EastEu)
				this.onceActionPlay(eastEuAnimation, EastEu)
			}, 19000)

            setTimeout(() => {
                let WestEu = resource.getObjectByName("WestEu");
                WestEu.position.set(-15, 20, -20)
                Group.add(WestEu)
                this.onceActionPlay(euFontAnimation, WestEu)
            }, 19500)



            setTimeout(() => {
                let cameraPos = {
                    x: 17.60109907039683,
                    y: 177.89073304773552,
                    z: 195.5451859856759
                }

                let targetPos = {
                    x: 8.475366005320012,
                    y: 4.0000000000000036,
                    z: -15.669147279544575
                }

                this.animateCamera(this.camera.position, this.controls.target, cameraPos, targetPos, 3000)
                // 四个箭头
                var rightTop = resource.getObjectByName("rightTop");
                var rightBottom = resource.getObjectByName("rightBottom");
                var leftTop = resource.getObjectByName("leftTop");
                var leftBottom = resource.getObjectByName("leftBottom");

                Group.add(rightTop);
                this.onceActionPlay(arrowAnimation, rightTop);

                Group.add(rightBottom);
                this.onceActionPlay(arrowAnimation, rightBottom);

                Group.add(leftTop);
                this.onceActionPlay(arrowAnimation, leftTop);

                Group.add(leftBottom);
                this.onceActionPlay(arrowAnimation, leftBottom);
                // 14s后拉近镜头
                setTimeout(() => {
                    let cameraPos = {
                        x: 12.739256443256235,
                        y: 72.40635175802669,
                        z: 65.05111105485109
                    }
                    let targetPos = {
                        x: 18.904894069114874,
                        y: 4.000000000000005,
                        z: -23.610714700574093
                    }

                    this.animateCamera(this.camera.position, this.controls.target, cameraPos, targetPos, 3000);
                }, 9000)
            }, 17000)

            setTimeout(()=>{
                this.map.children.forEach((item) => {
                    if (item.properties.name == "France") {
                        item.children.forEach((area) => {
                            if (area.type == "Mesh") {
                                area.material.color.set('#be8d48')
                            }
                        })
                    }
                })
                this.$refs.Lines.src = "music/lines/twoexp/2-3.mp3";
                this.$refs.Lines.play();

                var newCameraPos = {
                    x: 55.49306522163994,
                    y: 90.36181214083808,
                    z: 97.35257020008217
                }
                var newTargetPos = {
                    x: 5.346118957005615,
                    y: 3.99999999999999,
                    z: -17.009844075231456
                }

                this.animateCamera(this.camera.position, this.controls.target, newCameraPos, newTargetPos, 3000)

                let date = resource.getObjectByName("event-2");
                date.position.set(-50, 8, -25)
                Group.add(date);
                this.onceActionPlay(dateAnimation, date);

                let flagFranch = resource.getObjectByName("FranchFlag")
                flagFranch.scale.set(4, 4, 4);
                flagFranch.position.set(2, 9, -20);
                Group.add(flagFranch);
                this.onceActionPlay(flagAnimation, flagFranch);
                setTimeout(() => {
                    let flag = resource.getObjectByName("UsFlag")
                    flag.scale.set(4, 4, 4);
                    flag.rotateY(-Math.PI)
                    flag.position.set(12, 9, -20);
                    Group.add(flag);
                    this.onceActionPlay(flagAnimation, flag);
                }, 3000)

                setTimeout(() => {
                    let reject = resource.getObjectByName("reject")
                    reject.scale.set(10, 10, 10);
                    reject.position.set(12, 9, -20);
                    this.onceActionPlay(rejectAnimation, reject);
                    Group.add(reject);
                }, 5000)
            },30000)

        },
        initWtoColor() {
            // 华约初始成员国
            var initData = ["Soviet Union", "Albania", "Bulgaria", "East Germany", "Romania", "Hungary",
                "Poland", "Czech Rep.", "Slovakia"
            ]
            initData.forEach((cName) => {
                this.map.children.forEach((item) => {
                    if (item.properties.name == cName) {
                        item.children.forEach((area) => {
                            if (area.type == "Mesh") {
                                area.material.color.set('#a90209')
                            }
                        })
                    }
                })
            })
        }

    }
}
